<template>
  <div class="setting-panel">
    <span
      style="
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 40px;
      "
      >属性栏</span
    >
    <link-setting v-show="propType === 'link'"></link-setting>
    <node-setting v-show="propType === 'node'"></node-setting>
    <basic-setting
      v-show="propType !== 'link' && propType !== 'node'"
    ></basic-setting>
  </div>
</template>

<script>
import LinkSetting from "./linkProp.vue";
import NodeSetting from "./nodeProp.vue";
import BasicSetting from "./basicProp.vue";
import { mapState } from "vuex";
export default {
  components: {
    LinkSetting,
    NodeSetting,
    BasicSetting,
  },
  computed: {
    ...mapState(["currentPen"]),
    propType() {
      if (this.currentPen && this.currentPen.isNode()) return "node";
      if (this.currentPen && this.currentPen.isEdge()) return "link";
    },
  },
  mounted() {},
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.setting-panel {
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
  padding-top: 40px;
}
</style>
